<template>
  <!-- 内容区域 -->
  <div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
      <h1>
        用户管理
        <small>管理您仓库的员工</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-user"></i> 用户管理</a></li>
        <li><a href="#"> 用户详情</a></li>
        <li class="active">修改用户</li>
      </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">
      <!-- 修改密码 -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">修改用户类型</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
          <div class="box-body">
            <div class="form-group">
              <label for="userId">用户Id</label>
              <input id="userId" :value="user.id" class="form-control" data-cip-id="userId" disabled placeholder="用户Id"
                     type="text">
            </div>
            <div class="form-group">
              <label for="username">名称</label>
              <input id="username" :value="user.username" class="form-control" data-cip-id="username" disabled
                     placeholder="名称" type="text">
            </div>
            <div class="form-group">
              <label for="type">类型</label>
              <select id="type" :value="user.type" autocomplete="off"
                      class="form-control js-example-basic-single">
                <option value="管理员">管理员</option>
                <option value="员工">员工</option>
              </select>
            </div>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <button class="btn btn-primary" type="button" @click="changeType">提交类型修改</button>
            <div style="margin-top: 10px">
              <p id="message1" class="alert alert-danger hidden">message</p>
            </div>
          </div>
        </form>
      </div>

      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">修改用户密码</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
          <div class="box-body">
            <div class="form-group">
              <label for="password">新密码</label>
              <input id="password" v-model="password" class="form-control" placeholder="请输入新密码" type="password">
            </div>
            <div class="form-group">
              <label for="confirmPassword">确认新密码</label>
              <input id="confirmPassword" v-model="password1" class="form-control" placeholder="请再次输入相同的密码"
                     type="password">
            </div>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <button class="btn btn-primary" type="button" @click="changePassword">提交密码修改</button>
            <div style="margin-top: 10px">
              <p id="message2" class="alert alert-danger hidden">message</p>
            </div>
          </div>
        </form>
      </div>
      <!-- /.row -->
    </section>
    <!-- 正文区域 /-->

  </div>
  <!-- 内容区域 /-->
</template>

<script>
export default {
  name: "ChangeUser",
  data() {
    return {
      user: this.GLOBAL.appData.userList[this.$route.params.id - 1],
      password: "",
      password1: ""
    }
  },
  methods: {
    changeType() {
      let userType = document.getElementById("type");
      this.GLOBAL.appData.userList[this.user.id - 1].type = userType.value;
      this.$message.success("成功修改用户类型(模拟操作)");
    },
    changePassword() {
      if (this.password === this.password1) {
        this.$message.success("成功修改密码(模拟操作)");
      } else {
        this.$message.warning("两次输入密码不一致");
      }
    }
  }
}
</script>

<style scoped>

</style>
